import Header from "@/components/Header";
import { Avatar, Card, ConfigProvider, List, NoticeBar, Space, Swiper } from "antd-mobile";
import React from "react";
import './style.less';
import { PayCircleOutline, SetOutline, UnorderedListOutline } from "antd-mobile-icons";

const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']

const items = colors.map((color, index) => (
    <Swiper.Item key={index}>
        <div style={{ background: `url(${index % 2  ? 'https://img01.yzcdn.cn/vant/apple-1.jpg' : 'https://img01.yzcdn.cn/vant/cat.jpeg'})`, height: 100, backgroundSize: '100% 100%' }}>
            {/* {index + 1} */}
        </div>
    </Swiper.Item>
))

export default () => {
    return (
        <>
            <Header />
            <div className="cards-1">
                <Card className="first-cards">
                    <div className="card-content">
                        <Avatar src="https://files.codelife.cc/icons/iqiyi.svg" fit="cover" />
                        随访计划
                    </div>

                </Card>
                <Card className="first-cards">
                    <div className="card-content">
                        <Avatar src="https://files.codelife.cc/icons/iqiyi.svg" fit="cover" />
                        预约管理
                    </div>
                </Card>
            </div>

            <div className="cards-2">
                <Card className="second-cards">
                    <div className="card-content-4">
                        <div className="card-content-4-item">
                            <Avatar src="https://files.codelife.cc/icons/iqiyi.svg" fit="cover" style={{background: '#00cc4c'}}/>
                            患教中心
                        </div>
                        <div className="card-content-4-item">
                            <Avatar src="https://files.codelife.cc/icons/iqiyi.svg" fit="cover" />
                            健康近况
                        </div>
                        <div className="card-content-4-item">
                            <Avatar src="https://files.codelife.cc/icons/iqiyi.svg" fit="cover" />
                            圈子
                        </div>
                        <div className="card-content-4-item">
                            <Avatar src="https://files.codelife.cc/icons/iqiyi.svg" fit="cover" />
                            病例征集
                        </div>
                    </div>
                </Card>
            </div>

            <div className="cards-3">
                <Card className="third-cards">
                    <div className="card-content-2">
                        <NoticeBar content={"ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。"} color='alert' />
                    </div>
                </Card>
            </div>

            <div className="cards-4">
                <Card className="forth-cards">
                    <Swiper
                        style={{
                            '--track-padding': ' 0 0 16px',
                        }}
                    >
                        {items}
                    </Swiper>
                </Card>
            </div>

            <div className="cards-5">
                <Card className="fifth-cards">
                    <List>
                        <List.Item prefix={<UnorderedListOutline />} onClick={() => { }}>
                            账单
                        </List.Item>
                        <List.Item prefix={<PayCircleOutline />} onClick={() => { }}>
                            总资产
                        </List.Item>
                        <List.Item prefix={<SetOutline />} onClick={() => { }}>
                            设置
                        </List.Item>
                    </List>
                </Card>
            </div>

        </>
    );
}